<template>
  <div class="progressbar">
    <progress :percent="percent" activeColor="#EA5A49"></progress>
    <p>{{year}}已经过去了{{days}}天，{{percent}}%</p>
  </div>
</template>
<script>
  export default {
    components: {},
    data () {
      return {}
    },
    mounted () {

    },
    methods: {
      /**
       * 判断是否是闰年
       */
      isLeapYead () {
        const year = new Date().getFullYear()
        if (year % 400 === 0) {
          return true
        } else if (year % 4 === 0 && year % 100 !== 0) {
          return true
        } else {
          return false
        }
      },
      /**
       * 获取今天的天数
       */
      getDayOfYead () {
        return this.isLeapYead() ? 366 : 365
      }
    },
    computed: {
      /**
       * 获取到年份
       */
      year () {
        return new Date().getFullYear()
      },
      /**
       * 计算今年过去了多少天
       */
      days () {
        let start = new Date()
        start.setMonth(0)
        start.setDate(1)
        // start就是今年第一天
        // 今天的时间戳 减去 今年第一天的时间戳
        let offset = new Date().getTime() - start.getTime()
        return parseInt(offset / 1000 / 60 / 60 / 24) + 1
      },
      /**
       * 计算百分比
       * @returns {string}
       */
      percent () {
        // toFixed(1) 小数点只保留一位
        return (this.days * 100 / this.getDayOfYead()).toFixed(1)
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
.progressbar{
  width: 100%;
  margin-top: 10px;
  margin-bottom: 40px;
  progress {
    margin-bottom: 10px;
  }
}
</style>
